<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { useMessage } from 'naive-ui';
import WangEditor from 'wangeditor';
import {
  fetchCommunityGameList,
  fetchCommunityPostCreate,
  fetchCommunityPostDetailList
} from '@/service/api/community';
import { useAuthStore } from '@/store/modules/auth';
const message = useMessage();

const gameList = ref<Array<{ id: number; game_name: string }>>([]);
const selectedGameId = ref<number | null>(null);
const postDetailList = ref<any[]>([]);
const loading = ref(false);
// const router = useRouter(); // 不再需要跳转

onMounted(async () => {
  loading.value = true;
  try {
    const res = await fetchCommunityGameList();
    gameList.value = Array.isArray(res) ? res : (res?.data ?? []);
    if (gameList.value.length > 0) {
      selectedGameId.value = gameList.value[0].id;
      await loadPostDetails(selectedGameId.value);
    }
  } catch {
    // 错误提示
  }
  loading.value = false;
});

async function loadPostDetails(gameId: number) {
  loading.value = true;
  try {
    const res = await fetchCommunityPostDetailList(gameId);
    postDetailList.value = Array.isArray(res) ? res : (res?.data ?? []);
  } catch {
    // 错误提示
  }
  loading.value = false;
}

function selectGame(id: number) {
  selectedGameId.value = id;
  loadPostDetails(id);
}

// 发帖弹窗相关
const showPostModal = ref(false);
const postForm = reactive({
  title: '',
  content: '',
  video: '',
  images: [] as string[]
});
const editor = ref<any>();
const domRef = ref<HTMLElement>();
const postModalCardRef = ref<HTMLElement>();
let resizing = false;
let startH = 0;
let startW = 0;
let startX = 0;
let startY = 0;
function renderWangEditor() {
  editor.value = new WangEditor(domRef.value);
  if (editor.value?.config?.zIndex) editor.value.config.zIndex = 1001;
  editor.value.config.onchange = (html: string) => {
    postForm.content = html;
  };
  editor.value.create();
  editor.value.txt.html(postForm.content);
}
function openPostModal() {
  showPostModal.value = true;
  setTimeout(() => {
    renderWangEditor();
  }, 0);
}
function closePostModal() {
  showPostModal.value = false;
  postForm.title = '';
  postForm.content = '';
  postForm.video = '';
  postForm.images = [];
}
const authStore = useAuthStore();

function getPostParams() {
  const now = new Date();
  const pad = (n: number) => n.toString().padStart(2, '0');
  const format = (d: Date) =>
    `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
  return {
    game_id: Number(selectedGameId.value),
    user_id: Number(authStore.userInfo.userId),
    title: postForm.title,
    content: postForm.content,
    flag: 2,
    deleted: 0,
    create_time: format(now),
    update_time: format(now)
  };
}

function handlePostResponse(res: any) {
  const code = res?.response?.data?.code;
  const msg = res?.response?.data?.msg ?? '';
  console.log('发帖响应res:', res, 'code:', code, 'msg:', msg);
  if (code === 200) {
    message.success('发帖成功');
    if (selectedGameId.value !== null) {
      loadPostDetails(Number(selectedGameId.value));
    }
    closePostModal();
  } else {
    message.error(msg || '发帖失败');
  }
}

const submitLoading = ref(false);

// 重写submitPost函数，添加loading状态
async function submitPost() {
  if (!postForm.title || !String(postForm.content).trim()) return;
  if (!selectedGameId.value) return;
  const userId = Number(authStore.userInfo.userId);
  if (!userId) {
    message.error('未获取到用户ID，请重新登录');
    return;
  }

  submitLoading.value = true;
  const params = getPostParams();
  try {
    const res = await fetchCommunityPostCreate(params);
    handlePostResponse(res);
  } catch {
    // 删除发帖失败的错误提示
  } finally {
    submitLoading.value = false;
  }
}

function onResizeMouseDown(e: MouseEvent) {
  resizing = true;
  startX = e.clientX;
  startY = e.clientY;
  const card = postModalCardRef.value;
  if (card) {
    startW = card.offsetWidth;
    startH = card.offsetHeight;
  }
  document.addEventListener('mousemove', onResizing);
  document.addEventListener('mouseup', onResizeMouseUp);
}
function onResizing(e: MouseEvent) {
  if (!resizing) return;
  const card = postModalCardRef.value;
  if (card) {
    const maxH = 700;
    const maxW = 800;
    const minH = 320;
    const minW = 360;
    const newW = Math.max(minW, Math.min(maxW, startW + e.clientX - startX));
    const newH = Math.max(minH, Math.min(maxH, startH + e.clientY - startY));
    card.style.width = `${newW}px`;
    card.style.height = `${newH}px`;
  }
}
function onResizeMouseUp() {
  resizing = false;
  document.removeEventListener('mousemove', onResizing);
  document.removeEventListener('mouseup', onResizeMouseUp);
}

const showDetailModal = ref(false);
const detailPost = ref<any>(null);

function openDetail(post: any) {
  detailPost.value = post;
  showDetailModal.value = true;
}
function closeDetail() {
  showDetailModal.value = false;
  detailPost.value = null;
}

// 格式化时间
function formatTime(timeStr: string) {
  const date = new Date(timeStr);
  const now = new Date();
  const diff = now.getTime() - date.getTime();
  const minutes = Math.floor(diff / (1000 * 60));
  const hours = Math.floor(diff / (1000 * 60 * 60));
  const days = Math.floor(diff / (1000 * 60 * 60 * 24));

  if (minutes < 60) return `${minutes}分钟前`;
  if (hours < 24) return `${hours}小时前`;
  if (days < 7) return `${days}天前`;
  return date.toLocaleDateString();
}

// 获取内容摘要
function getExcerpt(content: string) {
  const textContent = content.replace(/<[^>]*>/g, '');
  return textContent.length > 100 ? `${textContent.substring(0, 100)}...` : textContent;
}

// 判断是否为新帖子（24小时内）
function isNewPost(timeStr: string) {
  const date = new Date(timeStr);
  const now = new Date();
  const diff = now.getTime() - date.getTime();
  return diff < 24 * 60 * 60 * 1000;
}
</script>

<template>
  <div class="community-container">
    <!-- 左侧游戏社区列表 -->
    <aside class="community-list">
      <div class="list-header">
        <h2 class="list-title">游戏社区</h2>
        <p class="list-subtitle">选择游戏，参与讨论</p>
      </div>
      <ul class="game-list">
        <li
          v-for="game in gameList"
          :key="game.id"
          :class="{ active: game.id === selectedGameId }"
          @click="selectGame(game.id)"
        >
          <div class="game-item">
            <div class="game-icon">🎮</div>
            <div class="game-info">
              <span class="game-name">{{ game.game_name }}</span>
              <span class="game-community">社区</span>
            </div>
          </div>
        </li>
      </ul>
    </aside>
    <!-- 右侧社区内容 -->
    <main class="community-main">
      <div class="community-header">
        <div class="header-info">
          <h1 class="main-title">
            {{ selectedGameId ? gameList.find(g => g.id === selectedGameId)?.game_name : '全部' }}社区
          </h1>
          <p class="post-count">{{ postDetailList.length }} 个帖子</p>
        </div>
        <NButton type="primary" class="post-btn" @click="openPostModal">
          <span class="btn-icon">✏️</span>
          <span class="btn-text">发帖</span>
        </NButton>
      </div>
      <section class="post-list">
        <div v-if="loading" class="loading-container">
          <div class="loading-spinner"></div>
          <p class="loading-text">加载中...</p>
        </div>
        <div v-else-if="postDetailList.length === 0" class="empty-state">
          <div class="empty-icon">📝</div>
          <h3 class="empty-title">暂无帖子</h3>
          <p class="empty-desc">成为第一个发布帖子的人吧！</p>
          <NButton type="primary" size="large" @click="openPostModal">发布第一个帖子</NButton>
        </div>
        <div v-else class="posts-grid">
          <div v-for="post in postDetailList" :key="post.id" class="post-card" @click="openDetail(post)">
            <div class="post-header">
              <div class="post-meta">
                <span class="post-author">{{ post.username || '匿名用户' }}</span>
                <span class="post-time">{{ formatTime(post.create_time) }}</span>
              </div>
              <div v-if="isNewPost(post.create_time)" class="post-status">
                <span class="status-badge new">新</span>
              </div>
            </div>
            <div class="post-content">
              <h3 class="post-title">{{ post.title }}</h3>
              <p class="post-excerpt">{{ getExcerpt(post.content) }}</p>
            </div>
            <div class="post-footer">
              <div class="post-stats">
                <span class="stat-item">
                  <span class="stat-icon">👁️</span>
                  <span class="stat-text">{{ Math.floor(Math.random() * 100) + 10 }}</span>
                </span>
                <span class="stat-item">
                  <span class="stat-icon">💬</span>
                  <span class="stat-text">{{ Math.floor(Math.random() * 20) }}</span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- 详情弹窗 -->
      <div v-if="showDetailModal && detailPost" class="detail-modal-mask" @click.self="closeDetail">
        <div class="detail-modal-card">
          <div class="detail-modal-header">
            <div class="detail-header-info">
              <h2 class="detail-title">{{ detailPost.title }}</h2>
              <div class="detail-meta">
                <span class="detail-author">{{ detailPost.username || '匿名用户' }}</span>
                <span class="detail-time">{{ formatTime(detailPost.create_time) }}</span>
              </div>
            </div>
            <span class="close-btn" @click="closeDetail">×</span>
          </div>
          <div class="detail-modal-body">
            <div class="post-content" v-html="detailPost.content"></div>
          </div>
        </div>
      </div>
      <!-- 发帖大卡片弹窗 -->
      <div v-if="showPostModal" class="post-modal-mask" @click.self="closePostModal">
        <div ref="postModalCardRef" class="post-modal-card" :style="{ resize: 'none', position: 'relative' }">
          <div class="post-modal-header">
            <div class="modal-header-content">
              <div class="modal-title-section">
                <span class="modal-icon">✏️</span>
                <h2 class="modal-title">发布新帖子</h2>
              </div>
              <p class="modal-subtitle">分享你的游戏心得和体验</p>
            </div>
            <span class="close-btn" @click="closePostModal">×</span>
          </div>
          <div class="post-modal-body">
            <div class="form-section">
              <label class="form-label">帖子标题</label>
              <NInput
                v-model:value="postForm.title"
                placeholder="请输入吸引人的标题..."
                size="large"
                class="title-input"
                :maxlength="50"
                show-count
              />
            </div>

            <div class="form-section">
              <label class="form-label">帖子内容</label>
              <div class="editor-container">
                <div ref="domRef" class="wangeditor-box"></div>
                <div class="editor-tips">
                  <span class="tip-item">💡 支持富文本编辑</span>
                  <span class="tip-item">📝 建议内容详实有料</span>
                </div>
              </div>
            </div>
          </div>
          <div class="post-modal-footer">
            <div class="footer-actions">
              <NButton class="cancel-btn" ghost @click="closePostModal">取消</NButton>
              <NButton
                type="primary"
                class="submit-btn"
                :disabled="!postForm.title || !String(postForm.content).trim()"
                :loading="submitLoading"
                @click="submitPost"
              >
                <span class="submit-icon">🚀</span>
                <span class="submit-text">发布帖子</span>
              </NButton>
            </div>
          </div>
          <div class="resize-handle" @mousedown="onResizeMouseDown"></div>
        </div>
      </div>
    </main>
  </div>
</template>

<style scoped>
.community-container {
  display: flex;
  height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e3f2fd 100%);
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
}

.community-list {
  width: 280px;
  background: #fff;
  border-right: 1px solid #e3f2fd;
  box-shadow: 2px 0 20px rgba(25, 118, 210, 0.08);
  display: flex;
  flex-direction: column;
}

.list-header {
  padding: 32px 24px 24px 24px;
  border-bottom: 1px solid #f0f4f8;
}

.list-title {
  font-size: 24px;
  font-weight: 700;
  color: #1976d2;
  margin: 0 0 8px 0;
}

.list-subtitle {
  font-size: 14px;
  color: #666;
  margin: 0;
  opacity: 0.8;
}

.game-list {
  list-style: none;
  margin: 0;
  padding: 16px 12px;
  flex: 1;
  overflow-y: auto;
}

.game-list li {
  margin-bottom: 8px;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.game-item {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.game-icon {
  font-size: 20px;
  margin-right: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f7ff;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.game-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.game-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 2px;
}

.game-community {
  font-size: 12px;
  color: #666;
  opacity: 0.8;
}

.game-list li:hover .game-item {
  background: linear-gradient(135deg, #e3f2fd 0%, #f0f7ff 100%);
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.15);
}

.game-list li:hover .game-icon {
  background: #1976d2;
  color: #fff;
  transform: scale(1.1);
}

.game-list li.active .game-item {
  background: linear-gradient(135deg, #1976d2 0%, #42a5f5 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(25, 118, 210, 0.3);
}

.game-list li.active .game-name,
.game-list li.active .game-community {
  color: #fff;
}

.game-list li.active .game-icon {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.community-main {
  flex: 1;
  padding: 32px 48px;
  overflow-y: auto;
}

.community-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e3f2fd;
}

.header-info {
  display: flex;
  flex-direction: column;
}

.main-title {
  font-size: 32px;
  font-weight: 700;
  color: #1976d2;
  margin: 0 0 8px 0;
}

.post-count {
  font-size: 16px;
  color: #666;
  margin: 0;
  opacity: 0.8;
}

.post-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 50px;
  background: linear-gradient(135deg, #1976d2 0%, #42a5f5 100%);
  color: #fff;
  border: none;
  box-shadow: 0 4px 16px rgba(25, 118, 210, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.post-btn:hover {
  background: linear-gradient(135deg, #1565c0 0%, #1976d2 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(25, 118, 210, 0.4);
}

.post-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 16px rgba(25, 118, 210, 0.3);
}

.btn-icon {
  font-size: 18px;
}

.btn-text {
  font-weight: 600;
}

.post-list {
  background: transparent;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #e3f2fd;
  border-top: 3px solid #1976d2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-text {
  font-size: 16px;
  color: #666;
  margin: 0;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  text-align: center;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 24px;
  opacity: 0.6;
}

.empty-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
}

.empty-desc {
  font-size: 16px;
  color: #666;
  margin: 0 0 24px 0;
  opacity: 0.8;
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 24px;
}

.post-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0f4f8;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.post-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #1976d2 0%, #42a5f5 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(25, 118, 210, 0.15);
  border-color: #e3f2fd;
}

.post-card:hover::before {
  opacity: 1;
}

.post-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.post-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.post-author {
  font-size: 14px;
  font-weight: 600;
  color: #1976d2;
}

.post-time {
  font-size: 12px;
  color: #999;
}

.post-status {
  display: flex;
  gap: 8px;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-badge.new {
  background: #e8f5e8;
  color: #2e7d32;
}

.post-content {
  margin-bottom: 16px;
}

.post-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin: 0 0 12px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-excerpt {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.post-stats {
  display: flex;
  gap: 16px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #999;
}

.stat-icon {
  font-size: 14px;
}

.stat-text {
  font-weight: 500;
}

.detail-modal-mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.detail-modal-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  width: 900px;
  max-width: 90vw;
  max-height: 80vh;
  padding: 32px;
  position: relative;
  animation: modalSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.detail-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f4f8;
}

.detail-header-info {
  flex: 1;
}

.detail-title {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.detail-meta {
  display: flex;
  gap: 16px;
  align-items: center;
}

.detail-author {
  font-size: 14px;
  font-weight: 600;
  color: #1976d2;
}

.detail-time {
  font-size: 12px;
  color: #999;
}

.close-btn {
  font-size: 32px;
  cursor: pointer;
  color: #ccc;
  transition: color 0.3s ease;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f5f5f5;
}

.close-btn:hover {
  color: #1976d2;
  background: #e3f2fd;
}

.detail-modal-body {
  max-height: 60vh;
  overflow-y: auto;
}

.post-content {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  word-break: break-word;
}

.post-content img {
  max-width: 100%;
  border-radius: 8px;
  margin: 16px 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.post-modal-mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}

.post-modal-card {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
  width: 700px;
  max-width: 90vw;
  min-width: 500px;
  min-height: 600px;
  max-height: 85vh;
  padding: 0;
  position: relative;
  animation: modalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.post-modal-header {
  background: linear-gradient(135deg, #1976d2 0%, #42a5f5 100%);
  color: #fff;
  padding: 32px 40px 24px 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
}

.modal-header-content {
  flex: 1;
}

.modal-title-section {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.modal-icon {
  font-size: 24px;
  background: rgba(255, 255, 255, 0.2);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: #fff;
}

.modal-subtitle {
  font-size: 14px;
  margin: 0;
  opacity: 0.9;
  font-weight: 400;
}

.close-btn {
  font-size: 28px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.close-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.post-modal-body {
  padding: 32px 40px;
  max-height: 60vh;
  overflow-y: auto;
}

.form-section {
  margin-bottom: 32px;
}

.form-section:last-child {
  margin-bottom: 0;
}

.form-label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

.title-input {
  border-radius: 12px;
  border: 2px solid #e3f2fd;
  transition: all 0.3s ease;
}

.title-input:focus-within {
  border-color: #1976d2;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.editor-container {
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid #e3f2fd;
  transition: all 0.3s ease;
}

.editor-container:focus-within {
  border-color: #1976d2;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.editor-tips {
  display: flex;
  gap: 16px;
  padding: 12px 16px;
  background: #f8faff;
  border-top: 1px solid #e3f2fd;
}

.tip-item {
  font-size: 12px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 4px;
}

.video-input {
  border-radius: 12px;
  border: 2px solid #e3f2fd;
  transition: all 0.3s ease;
}

.video-input:focus-within {
  border-color: #1976d2;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.input-hint {
  font-size: 12px;
  color: #666;
  margin: 8px 0 0 0;
  opacity: 0.8;
}

.post-modal-footer {
  background: #f8faff;
  padding: 24px 40px;
  border-top: 1px solid #e3f2fd;
}

.footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  align-items: center;
}

.cancel-btn {
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.cancel-btn:hover {
  background: #e3f2fd;
  color: #1976d2;
}

.submit-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 32px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 16px;
  background: linear-gradient(135deg, #1976d2 0%, #42a5f5 100%);
  border: none;
  box-shadow: 0 4px 16px rgba(25, 118, 210, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.submit-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #1565c0 0%, #1976d2 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(25, 118, 210, 0.4);
}

.submit-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 4px 16px rgba(25, 118, 210, 0.3);
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.submit-icon {
  font-size: 18px;
}

.submit-text {
  font-weight: 600;
}

.wangeditor-box {
  border: none;
  border-radius: 0;
  background: #fff;
  min-height: 200px;
  margin-bottom: 0;
  overflow: hidden;
}

:deep(.w-e-toolbar) {
  background: #f8faff !important;
  border-color: #e3f2fd !important;
  border-radius: 0;
  border-bottom: 1px solid #e3f2fd;
}

:deep(.w-e-text-container) {
  background: #fff;
  border-color: #e3f2fd !important;
  border-radius: 0;
  min-height: 200px;
  border: none;
}

:deep(.w-e-text-container .w-e-text) {
  padding: 16px;
  font-size: 14px;
  line-height: 1.6;
}

.resize-handle {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 28px;
  height: 28px;
  cursor: se-resize;
  z-index: 10;
  background: linear-gradient(135deg, #e3f2fd 0%, #1976d2 100%);
  border-radius: 8px;
  opacity: 0.8;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.resize-handle:hover {
  opacity: 1;
  transform: scale(1.1);
}

.resize-handle::after {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  border-right: 2px solid #1976d2;
  border-bottom: 2px solid #1976d2;
  border-radius: 0 0 6px 0;
  margin: 5px;
}

@media (max-width: 768px) {
  .post-modal-card {
    width: 95vw;
    min-width: 0;
    margin: 16px;
    max-height: 90vh;
  }

  .post-modal-header {
    padding: 24px 24px 20px 24px;
  }

  .post-modal-body {
    padding: 24px 24px;
  }

  .post-modal-footer {
    padding: 20px 24px;
  }

  .modal-title {
    font-size: 20px;
  }

  .modal-icon {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }

  .footer-actions {
    flex-direction: column;
    gap: 12px;
  }

  .submit-btn,
  .cancel-btn {
    width: 100%;
    justify-content: center;
  }
}
</style>
